<template>
  <div class="info">
    <div class="top">
      <van-icon @click="$router.back()" name="arrow-left" />
      <p>个人信息</p>
    </div>
    <div class="content">
      <infoList title="头像">
        <template #img>
          <img class="img" :src="infoList.avatar" alt="" />
        </template>
      </infoList>
      <infoList title="昵称">
        <template #img>
          <span>{{ infoList.nickname }}</span>
        </template>
      </infoList>
      <infoList title="手机号">
        <template #img>
          <span>{{ infoList.mobile }}</span>
        </template>
      </infoList>
      <infoList title="性别">
        <template #img>
          <span>{{ infoList.sex == 3 ? "保密" : "" }}</span>
        </template>
      </infoList>
      <infoList title="出生日期" @fn="dateList">
        <template #img>
          <span>{{ infoList.birthday }}</span>
        </template>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </infoList>
      <infoList title="所在城市"></infoList>
      <infoList title="学科"></infoList>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "@/utils/api.js";
import infoList from "../infoList.vue";
export default {
  name: "",
  components: { infoList },
  data() {
    return {
      infoList: {
        avatar: require("../../assets/img/header-logo.png"),
      },
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
    };
  },
  created() {},
  mounted() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      let res = await getUserInfo();
      console.log(res);
      this.infoList = res.data.data;
    },
    dateList() {
      console.log(111);
    },
  },
};
</script>
<style scoped lang='scss'>
.info {
  .top {
    display: flex;
    align-items: center;
    padding: 10px;
    p {
      width: 90%;
      text-align: center;
    }
  }
  .img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }
}
</style>
